<template>
    <section class="main" :class="{'apptip-visible': !apptipClosed && $route.path.indexOf('cart4') < 0}">
        <!-- app广告 -->
        <div class="app-adver" v-if="!apptipClosed">
            <ul>
                <li class='li_close'>
                    <a href="javascript:;" @click="closeAppTip"></a>
                </li>
                <li class='li_msg'>
                    <p>打开苏鲜生APP</p>
                    <p>10元红包等你领哦~</p>
                </li>
                <li class='download_btn'>
                    <a href="//sale.suning.com/CMWS/appdownload/index.html">立即下载</a>
                </li>
            </ul>
        </div>

        <div v-transfer-dom>
            <loading v-model="isLoading"></loading>
        </div>
        <mask-loading v-show="showmask"></mask-loading>
        <transition :name="direction">
            <router-view class="router-view child-view" v-bind:style="{ 'padding-bottom': showFooter?(98/50)+'rem':0 }"></router-view>
        </transition>
        <Myfooter v-if="showFooter" ref="footer"></Myfooter>
    </section>
</template>

<script>
import Myfooter from './components/footer.vue'
import MaskLoading  from '@/components/maskLoading'
import { XHeader, Loading, TransferDomDirective as TransferDom } from 'vux'
import { mapState, mapGetters, mapMutations } from 'vuex'
import './style/base.scss'
import store from './store'
import * as Util from './config/utils'

export default {
    name: 'app',
    directives: {
        TransferDom
    },
    components: { Myfooter, XHeader, Loading, MaskLoading },
    data () {
        return {
            title: '苏鲜生',
            footer: '@版权归属苏鲜生',
            apptipClosed: false
        }
    },
    computed: {
        ...mapState({
            isLoading: 'isLoading',
            direction: 'direction',
            showFooter: 'showFooter',
            showmask: 'showMask',
        }),

        ...mapGetters([
            'isPosition'
        ])

    },
    watch: {
        '$route': function(val, old){
            if(this.$route.path.indexOf('/detail/') == -1) {
                Window.wxObj.title = '苏宁小店，一个会上网的小店'
                Window.wxObj.desc = '商超宅配1小时达，生鲜果蔬每日好新鲜！'
                Window.wxObj.link = location.href
                Window.wxObj.imgUrl = location.protocol + '//' + location.hostname + '/images/logo.jpg'
            }
        }
    },
    methods: {
        ...mapMutations({
            updateLoadingStatus: 'updateLoadingStatus',
            updateDirection: 'updateDirection'
        }),

        closeAppTip() {
            Util.setCookie('xd_apptip_closed', 1);
            this.apptipClosed = true;
        }
    },
    mounted(){
        this.apptipClosed = Util.getCookie('xd_apptip_closed');
    }
}
</script>

<style lang="less">
    @import '~vux/src/styles/reset.less';
    body {
        background-color: #fbf9fe;
    }
    html, body {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
    }
    .main{
        height: 100%;
    }

    
    .child-view {
        position: absolute;
        left: 0;
        transition: all .25s cubic-bezier(0.535, 0.805, 0.760, 0.970);
        -webkit-transition: all .25s cubic-bezier(0.535, 0.805, 0.760, 0.970);

        box-sizing: border-box;
        height: 100%;
        padding-bottom: 50px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .forward-enter{
      opacity: 0.5;
      -webkit-transform: translate(15rem, 0);
      transform: translate(15rem, 0);
    }

    .forward-leave-active{
      opacity: 0;
      -webkit-transform: translate(-100px, 0);
      transform: translate(-100px, 0);
    }

    .reverse-enter{
      opacity: 0.5;
      -webkit-transform: translate(-15rem, 0);
      transform: translate(-15rem, 0);
    }

    .reverse-leave-active{
      opacity: 0;
      -webkit-transform: translate(100px, 0);
      transform: translate(100px, 0);
    }



    /**
    * vue-router transition
    */
    .router-view {
        width: 100%;
        animation-duration: 0.5s;
        animation-fill-mode: both;
        backface-visibility: hidden;
    }
    .vux-pop-out-enter-active,
    .vux-pop-out-leave-active,
    .vux-pop-in-enter-active,
    .vux-pop-in-leave-active {
        will-change: transform;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .vux-pop-out-enter-active {
        animation-name: popInLeft;
    }
    .vux-pop-out-leave-active {
        animation-name: popOutRight;
    }
    .vux-pop-in-enter-active {
        perspective: 1000;
        animation-name: popInRight;
    }
    .vux-pop-in-leave-active {
        animation-name: popOutLeft;
    }

    @keyframes popInLeft {
        from {
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    @keyframes popOutLeft {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }
    }
    @keyframes popInRight {
        from {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    @keyframes popOutRight {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }
    }
</style>

<style lang="scss">
    @import './style/mixin.scss';

    /* 下载APP提示 */
    .app-adver {
        display: none;
        width: 100%;
        height: to_rem(104px);
        background-color: rgba(0, 0, 0, .6);

        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        ul {
            li {
                height: to_rem(104px);
                float: left;
            }
            .li_close {
                width: to_rem(84px);
                a {
                    display: block;
                    padding: 0.84rem 0;
                    &:after {
                        display: block;
                        width: 0.4rem;
                        height: 0.4rem;
                        background-image: url(/static/images/tip-dlapp-close.png);
                        content: " ";
                        background-size: 100% 100%;
                        margin: 0 auto;
                    }
                }
            }
            .li_msg {
                width: to_rem(350px);
                padding-left: to_rem(100px);
                padding-top: to_rem(18px);
                background: url(/static/images/applogo.png) no-repeat left center;
                background-size: to_rem(80px) to_rem(80px);
                p {
                    font-size: to_rem(24px);
                    color: #fff;
                    line-height: to_rem(33px);
                }
            }
            .download_btn {
                width: to_rem(256px);
                height: to_rem(60px);
                float: right;
                a {
                    display: block;
                    width: to_rem(200px);
                    height: to_rem(60px);
                    background-color: #ff782d;
                    line-height: to_rem(60px);
                    text-align: center;
                    font-size: to_rem(24px);
                    border-radius: to_rem(100px);
                    color: #fff;
                    margin: to_rem(22px) auto;
                }
            }
        }
    }

    /* 出现APP下载提示的情况下，各模块的样式调整 */
    .apptip-visible {
        .app-adver {
            display: block;
        }

        .home-header {
            top: _(104) !important;
        }
        .homecontent {
            padding-top: _(104);
        }
        .hour-array {
            box-sizing: border-box;
            padding-top: _(104);
        }
        .sn-search {
            margin-top: _(104);
        }
        .sn-tofixed {
            margin-top: _(104);            
        }

        .cart1-nav {
            top: _(104);
        }
        .cart1-content {
            padding-top: _(204) !important;
        }
        .send-main {
            padding-top: _(104);
        }

        .order-tab {
            top: _(104) !important;
        }
        .order-list-container {
            padding-top: _(209) !important;
        }
        .sn-order-list-container {
            padding-top: _(104) !important;
        }
        .order-others {
            padding-top: _(209) !important;
        }
        .order-wrap {
            padding-top: _(104);
        }
        .order-trail {
            padding-top: _(134) !important;
        }

        .my-center-top {
            padding-top: _(104);
        }

        .app-detail {
            .topnav {
                top: _(104) !important;
            }
            .detail {
                padding-top: _(184) !important;
            }
        }

        .coupon, .cart2-coupon {
            padding-top: _(104);
            box-sizing: border-box;
        }

        .invoice>:first-child {
            margin-top: _(104);
        }

        .wp-inner {
            nav {
                top: _(104);
            }
            .ad-content {
                margin-top: _(208) !important;
            }
        }
        .edit-address-form {
            margin-top: _(104);
        }
        .show-address {
            padding-top: _(104);
        }
        .ad-content .show-address {
            padding-top: 0;
        }
        .addressAll .citys {
            padding-top: _(104);
        }
    }
</style>

